<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ include file="/common/includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑角色信息</title>
<%String path = request.getContextPath(); %>
<link rel="stylesheet" href="<%=path %>/public/css/main.css" type="text/css" />
<link rel="stylesheet" href="<%=path %>/css/main.css" type="text/css" />
	<%@ include file="/common/metaInput.jsp" %> 
 <style type="text/css"> 
           
            
            .topArea{ text-align: center;font-size: 12px;}
                </style>

</head>
<body>
<div id="layout1">
			<div position="top" class="topArea">
				<div ><h4>具有权限<label style="color:red;">${tmpPerm.name }[${tmpPerm.description }]</label>:的角色</h4></div>
				<div>
					<input type="button" value="确定" id="okBtn">
					<input type="button" value="取消" id="cancelBtn">
				</div>
			</div>
            <div position="left" title="已属角色">
            	<div id="hasRoleGrid"></div>
            </div>
            <div position="center" title="操作">
            	<div class="switch_area">
            		<div class="left2right" id="left2right"></div>
            		<div class="right2left" id="right2left"></div>
            	</div>
            </div>
	        <div position="right" title="可分配角色">
	        	<div id="noRoleGrid"></div>
	        </div>  

        </div> 
<script type="text/javascript">
	var api = frameElement.api, W = api.opener , D = W.document;
	$(function(){
		
		UserRoleGrid.initPage();
		$('#left2right').click(function(){
			UserRoleGrid.left2right();
		});
		$('#right2left').click(function(){
			UserRoleGrid.right2left();
		});
		$('#okBtn').click(function(){
			UserRoleGrid.submitRole();
		});
		$('#cancelBtn').click(function(){
			api.close();
		});
		$('.switch_area > div').hover(function(){ //over
			var cname = this.className;
			if(this.className.indexOf('_shi') < 0){
				$(this).removeClass(this.className);
				$(this).addClass(cname + '_shi');
			}
		},function(){  //out
			var cname = this.className;
			var index = cname.indexOf('_shi');
			if(index > 0){
				$(this).removeClass(this.className);
				$(this).addClass(cname.substring(0 ,index ));
			}
		});
		
	});
	var UserRoleGrid = function(){
		var permId = '${tmpPerm.id}';
		var roles = ${roles};
		var noRoles = ${noRoles};
		var url = "${ctx}/security/permiss/updatePermRole.do";
		var hasManager = null;
		var noManager = null;
		return{
			initPage : function(){
				$("#layout1").ligerLayout({topWidth:'100%', leftWidth: '46%' , centerWidth: '6%' ,rightWidth: '46%' });
				UserRoleGrid.initGrid();
			},
			initGrid : function(){
				hasManager = $("#hasRoleGrid").ligerGrid({
		            columns: [{ display: '名称', name: 'name',type: 'string',width  : 150 },
				           	  { display: '描述', name: 'description',type: 'string',width  : 200}],
				    data: roles, pageSize: 15,
				    width: '98%', height: '98%', checkbox: true,rownumbers:true
				});
				noManager = $("#noRoleGrid").ligerGrid({
		            columns: [{ display: '名称', name: 'name',type: 'string',width  : 150 },
				           	  { display: '描述', name: 'description',type: 'string',width  : 200}],
				    data: noRoles, pageSize: 15,
				    width: '98%', height: '98%', checkbox: true,rownumbers:true
				});
			},
			left2right : function(){
				hasManager.deleteSelectedRow();
				var rows = hasManager.getSelectedRows();
				
				for(var i = 0 ; i < rows.length; i++){
					var o = rows[i];
					noManager.addRow({id:o.id , name:o.name , description : o.description});
				}
				
			},
			right2left : function(){
				noManager.deleteSelectedRow();
				var rows = noManager.getSelectedRows();
				for(var i = 0 ; i < rows.length; i++){
					var o = rows[i];
					hasManager.addRow({id:o.id , name:o.name , description : o.description});
				}
			},
			submitRole : function(){
				var data = hasManager.getData();
				
		//		var addData = hasManager.getAdded(); 		//新增的角色
		//		var deleteData = hasManager.getDeleted(); 	//解除掉的角色
				$.ajax({
					url : url,type:'POST',dataType : 'json',
					data : {service : 'updatePermRole' , 
							permId : permId ,
							roleData : JSON.stringify(data)},
				 	success : function(data , textStatus , jqXHR){
				 		if(data.resultFlag){
				 			$.ligerDialog.success('更新权限所属角色成功！' , function(yes){
				 				//api.close();
				 			});
				 		}else{
				 			$.ligerDialog.success('更新权限所属角色失败！');
				 		}
				 		
				 	}
				});
			}
		};
		
	}();
</script>
</body>
</html>